<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../baselayout/import.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/highmaps.css">
<title>详情</title>
</head>
<body>
<div id="map">

</div>

<input type="hidden" value="${title}" name="title">
<input type="hidden" value="${tooltipStr}" name="tooltipStr">
<c:forEach items="${provincesData }" var="province">
<input type="hidden" name="x" value="${province}">

</c:forEach>
</body>

<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script src="${staticPath}/assets/js/figure/highmaps.js"></script>
<script src="${staticPath}/assets/js/figure/data.js"></script>
<script src="${staticPath}/assets/js/figure/drilldown.js"></script>
<script type="text/javascript" src="${staticPath}/assets/js/figure/cn-china-by-peng8.js"></script>
<script type="text/javascript">
$(function () {
	var title = $("input[name=title]").val();
	var tooltipStr = $("input[name=tooltipStr]").val();
	var x = $("input[name=x]").map(function(){
		return $(this).val();
	}).get();

    Highcharts.setOptions({
        lang:{
            drillUpText:"返回"
            // > {series.name}
        }
    });

    var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#map').width() < 400;
    // 给城市设置随机数据,这里的data的长度是35
    $.each(data, function (i) {
        this.drilldown = this.properties['drill-key'];
        this.value = parseInt(x[i]); //各省数值

        
   
    });
    console.log(data);
	function getPoint(e){
		console.log(e.point.name);
	}
	
	function getShow(e){
		alert(1);
	}
    //初始化地图
    $('#map').highcharts('Map', {
        chart : {
			spacingBottom:20,				 
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        var chart = this;
                              /*   mapKey = 'countries/china/' + e.point.drilldown + '-all',
                              fail = setTimeout(function () {
                                    if (!Highcharts.maps[mapKey]) {
                                        chart.showLoading('<i class="icon-frown"></i> 加载失败 ' + e.point.name);

                                        fail = setTimeout(function () {
                                            chart.hideLoading();
                                        }, 1000);
                                    }
                                }, 10000);*/
                        var cname=e.point.properties["cn-name"];
                        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
                        // 加载城市数据
                        $.ajax({
                            type: "GET",
                            url: "http://data.hcharts.cn/jsonp.php?filename=GeoMap/json/"+ e.point.drilldown+".geo.json",
                            contentType: "application/json; charset=utf-8",
                            dataType:'jsonp',
                            crossDomain: true,
                            success: function(json) {
                                data = Highcharts.geojson(json);						 
                                $.each(data, function (i) {									 
                                    this.value = i;//各个市区的数值,每个省的城市的数据不同,需要根据具体情况
                                    console.log("dxx"+i);
                                    this.events={};
									this.events.click=getPoint;
																		
                                });
                                chart.hideLoading();
                                chart.addSeriesAsDrilldown(e.point, {
                                    name: e.point.name,
                                    data: data,
									events:{
											show:function(){
												alert(1);
											}
									},
                                    dataLabels: {
                                        enabled: true,
                                        format: '{point.name}'
                                    }
                                });
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {

                            }
                        });
                    }
                    this.setTitle(null, { text: cname });
                },
                drillup: function () {
                    this.setTitle(null, { text: '中国' });
                }
            }
        },
		tooltip: { 
			formatter:function(){
				var htm= tooltipStr+"<br>";
				if(this.point.drilldown){
				    htm+=this.point.properties["cn-name"];
				}else{
					 htm+=this.point.name;
				}
				htm+=":"+this.point.value;
				 return htm;
			}
		},
        credits:{
			href:"javascript:goHome()",
            text:"北京交通大学交通数据挖掘与分析实验室"
        },
        title : {
            text : title
        },
        
        subtitle: {
            text: '中国',
            floating: true,
            align: 'left',
            y: 50,
            style: {
                fontSize: '16px'
            }
        },

        legend: small ? {} : {
			// enabled: false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        //tooltip:{
        //pointFormat:"{point.properties.cn-name}:{point.value}"
        //},
        colorAxis: {
            min: 0,
            minColor: '#E6E7E8',
            maxColor: '#005645',
			labels:{
				style:{
					"color":"red","fontWeight":"bold"
				}
			}
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            }
        },
        series : [{
            data : data,
            name: '中国',
            dataLabels: {
                enabled: true,
                format: '{point.properties.cn-name}'
            }
        }],
        drilldown: {	
            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textShadow: '0 0 3px #000000'
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    });
});

var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";  
var base64DecodeChars = new Array(  
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,  
    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,  
    52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1,  
    -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12, 13, 14,  
    15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1,  
    -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,  
    41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);  


function base64decode(str) {  
    var c1, c2, c3, c4;  
    var i, len, out;  
  
    len = str.length;  
    i = 0;  
    out = "";  
    while(i < len) {  
    /* c1 */  
    do {  
        c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];  
    } while(i < len && c1 == -1);  
    if(c1 == -1)  
        break;  
  
    /* c2 */  
    do {  
        c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];  
    } while(i < len && c2 == -1);  
    if(c2 == -1)  
        break;  
  
    out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));  
  
    /* c3 */  
    do {  
        c3 = str.charCodeAt(i++) & 0xff;  
        if(c3 == 61)  
        return out;  
        c3 = base64DecodeChars[c3];  
    } while(i < len && c3 == -1);  
    if(c3 == -1)  
        break;  
  
    out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));  
  
    /* c4 */  
    do {  
        c4 = str.charCodeAt(i++) & 0xff;  
        if(c4 == 61)  
        return out;  
        c4 = base64DecodeChars[c4];  
    } while(i < len && c4 == -1);  
    if(c4 == -1)  
        break;  
    out += String.fromCharCode(((c3 & 0x03) << 6) | c4);  
    }  
    return out;  
}  
function goHome(){
	window.open("http://www.peng8.net/");
}
function getGithub(){
		$.getJSON("https://api.github.com/repos/peng8/GeoMap/contents/json/bei_jing.geo.json", function(data){
		console.log(base64decode(data.content));
});
		
}


</script>


</html>